<template lang="html">
    <div class="train-details">
        <nav-header>
        <template slot="menuBefore">
            <li>
            <router-link to="/teaching/train/train-list">培训列表</router-link>
            </li>
            <li class="gap">&gt;</li>        
        </template>
        <li v-text="form.name"></li>
        </nav-header>
        <el-form ref="form" :model="form" label-width="80px" v-loading="loading.status" :element-loading-text="loading.txt">
        <el-form-item label="封面图片">
            <el-upload
            class="upload-demo"
            list-type="picture-card"
            :action="this.BASE_URL + '/api/resource/res_upload'"
            :show-file-list="false"
            :disabled="true">
            <div v-show="!form.picture">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">未上传</div>
            </div>
            <div v-show="form.picture" class="cover-box"><img :src="this.BASE_URL + form.picture" /></div>
            </el-upload>
        </el-form-item>
        <el-form-item label="培训名称">
            <el-input v-model="form.name"readonly></el-input>
        </el-form-item>
            <el-form-item :label="user_level === 0 ? '培训人' : '培训教师'">
            <el-input v-model="form.username" readonly></el-input>
        </el-form-item>
        <el-form-item label="学段">
            <el-input v-model="form.studyname" readonly></el-input>
        </el-form-item>
        <el-form-item label="学科">
            <el-input v-model="form.subjectname" readonly></el-input>
        </el-form-item>
        <el-form-item label="培训时间">
            <el-input v-model="form.start_time+'  -  '+form.end_time" readonly></el-input>
        </el-form-item>
        <el-form-item label="培训地区">
            <el-input v-model="form.city_name+'  -  '+form.zone_name+'  -  '+form.street_name" readonly></el-input>
        </el-form-item>
        <el-form-item label="培训学校">
            <el-input v-model="form.school_name" readonly></el-input>
        </el-form-item>
        <el-form-item label="教师名单">
            <div class="teach-list">
            <ul>
                <li v-for="(teach, inx) in form.teacher_list"><span class="teach-name" v-text="teach"></span></li>
            </ul>
            </div>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword" class="keywordBox">
                    <el-tag
                    :key="tag"
                    v-for="(tag,tagInx) in form.keyword"
                    :disable-transitions="false"
                    >
                    {{tag}}
                    </el-tag>
                </el-form-item>
        <el-form-item label="专辑介绍" prop="profile">
            <el-input type="textarea" v-model="form.profile" placeholder="在此输入专辑介绍" readonly></el-input>
        </el-form-item>
        <el-form-item label="课程目录">
            <div class="course-index" v-for="(course,couInx) in courseList">
            <el-form :ref="'sectionForm' + couInx" :model="course" label-width="80px">
                <el-form-item :label="'第' + (couInx+1) + '章：'" prop="name">
                <el-input placeholder="输入章名" v-model="course.name" readonly></el-input>
                </el-form-item>
            </el-form>
            <el-form :ref="'sectionForm' + couInx + secInx" v-for="(section,secInx) in course.section" :key="secInx" :model="section" label-width="80px">
                <el-form-item :label="'第' + (secInx+1) + '节：'" prop="name">
                <el-input placeholder="输入节名" v-model="section.name" readonly></el-input>
                </el-form-item>
                <el-form-item label="" v-show="section.video.length > 0">
                <ul class="chapter-list">
                    <li v-for="(src, srcInx) in section.video">
                    <a class="chapter-name ellips" :class="{'hasUrl' : !src.url}" :href="src.url ? BASE_URL +  src.url : 'javascript:;'" v-text="src.name" target="_blank"></a>
                    </li>
                </ul>
                </el-form-item>
            </el-form>
            </div>
        </el-form-item>
        <el-form-item label="允许下载" prop="is_download">
            <el-radio-group v-model="form.is_download">
            <el-radio :label="1">允许</el-radio>
            <el-radio :label="0">不允许</el-radio>
        </el-radio-group>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
    name: 'train-add',
    data() {
        return {
        loading:{
                status:false,
                txt:'获取数据...'
            },
        form: {
        },
        courseList: [],
        user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')), /*判断当前登录会员是否教育局 */
        }
    },
    mounted() {},
    created() {
        this.getDetails()
    },
    methods: {
        getDetails() {
            this.loading.status = true;
            let params = {
                train_id: this.$route.query.trainid
            }
            const success = res => {
                this.loading.status = false;
                this.form = res.data;
                this.form.keyword = this.form.keyword ? this.form.keyword.split(',') : [];
                this.gettrains_l();
            }
            this.$ajax.get('api/train/train',{params: params, func: {success: success}})
        },
        gettrains_l() {
            let params = {
                train_id: this.$route.query.trainid,
                userid: this.$store.getters.userInfo.id,
            }
            const success = res => {
                if(res.data.length > 0) {
                this.courseList = res.data;
                }
            }
            this.$ajax.get('api/train/gettrains_l',{params: params, func: {success: success}})
        },
        back() {
            this.$router.back();
        },
    },
    }
</script>
<style lang="scss">
    .train-details {
    margin-bottom: 35px;
    .el-form {
        width: 480px;
        .selBox {
        width: 32%;
        }
        .keywordBox{
        .el-tag{
            margin-right: 10px;
            border: 0;
            background-color: rgb(239, 246, 255);
            border-radius: 0;
        }
        }
        .keyword{
        max-width: 220px !important;
        }
        .el-upload {
        width: 100%;
        line-height: 1.5;
        .el-icon-upload {
            margin-top: 30px;
        }
            .cover-box {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                background: #fff;
                border: 1px solid #dcdfe6;
                z-index: 1;

                img {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }
        .el-form-item__label {
        text-align: left;
        }
        .el-cascader {
        display: block;
        }
        .el-input {
        display: block;
        width: 100%;
        }
        .el-date-editor--daterange.el-input__inner {
        width: 100%;
        }
        .el-textarea__inner {
        resize: none;
        width: 625px;
        height: 100px;
        }
        .teach-list {
        width: 625px;
        height: 100px;
        padding: 5px 15px;
        border: 1px solid #dcdfe6; 
        border-radius: 4px;
        cursor: text;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: auto;
        .placeholder {
            color: #c0c4cf;
            font-size: 13px;
        }
        li {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            background: #ddd;
            margin-right: 15px;
            margin-bottom: 10px;
            .teach-name {
            padding: 0 10px;
            }
            i {
            display: inline-block;
            height: 100%;
            vertical-align: top;
            padding: 0 5px;
            line-height: 32px;
            background: #c0c4cf;
            cursor: pointer;
            }
        }
        }
        .course-index {
        position: relative;
        width: 625px;
        padding: 32px 18px;
        margin-top: 15px;
        background: #f2f2f2;
        border-radius: 5px;
        box-sizing: border-box;
        &:nth-of-type(1) {
            margin-top: 0;
        }
        .el-form {
            width: 100%;
            .el-form-item__content {
            width: 86%;
            .el-input {
                width: 300px;
            }
            }
            .el-icon-arrow-down {
            position: absolute;
            right: 0;
            top: 15px;
            font-size: 20px;
            transform: translateY(-50%);
            cursor: pointer;
            }
            .video-more {
            top: 0;
            transform: translateY(0);
            }
            .rotate {
            transform: rotate(180deg) translateY(40%);
            right: 0;
            }
        }
        .chapter-list {
            margin-bottom: 20px;
        li {
            display: flex;
            height: 44px;
            line-height: 44px;
            border-top: 1px solid #e8e8e8;
            .chapter-name {
                flex: 1;
                margin-right: 25px;
                color: #409eff;
                cursor: pointer;
            }
            .hasUrl {
                color: #000;
                cursor: auto;
            }
            .chapter-icon {
                text-align: right;
                .icon-up {
                transform: rotate(90deg);
                }
                .icon-down {
                transform: rotate(-90deg);
                }
                i {
                cursor: pointer;
                margin-right: 10px;
                }
            }
            }
            li:last-child {
            border-bottom: 1px solid #e8e8e8;
            }
        }
        .course-index-fr {
            position: absolute;
            width: 100%;
            text-align: right;
            z-index: 10;
            ul {
            display: inline-block;
            width: 120px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            text-align: center;
            background: #fff;
            li {
                cursor: pointer;
                .uploader {
                .uploader-btn {
                    border: none;
                    color: #000;
                    background: none;
                }
                .uploader-list {
                    display: none;
                }
                }
                &:hover {
                background: #f2f2f2;
                }
            }
            }
            .del-chapter {
            margin-bottom: 20px;
            }
        }
        }
    }
    .el-dialog {
        min-width: 610px;
        .table-pagination {
        margin-top: 0;
        padding: 5px 0;
        text-align: left;
        border: 1px solid #ddd;
        border-top: 0;
        }
        .hr {
        width: 100%;
        border-bottom: 1px dotted #dcdfe6;
        margin: 15px 0;
        }
        .dialog-title {
        border-left: 2px solid #606266;
        padding-left: 5px;
        color: #000;
        margin: 10px 0;
        span {
            color: #999;
            margin-left: 5px;
        }
        }
        .el-radio+.el-radio {
        margin-left: 20px;
        }
        .el-input-number--small {
        width: 60px;
        margin-right: 5px;
        }
    }
    .show {
        display: block;
    }
    .hide {
        display: none;
    }
    }
</style>
